JS中实现简单Formatter函数示例代码

您所在的位置:网站首页 js formatter JS中实现简单Formatter函数示例代码

JS中实现简单Formatter函数示例代码

2023-05-04 18:18| 来源: 网络整理| 查看: 265

JS原生并没有提供方便使用的Formatter函数,用字符拼接的方式看起来混乱难读,而且使用起来很不方便。个人感觉C#里提供的语法比较好用,如:

String.Format(“Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love");

这种有顺序的替换方式,比较清晰,而且在要替换同一内容时候可以省去传递重复参数的情况,下面是JS简单实现版本(没有严格测试):

(function(exports) { exports.format = function(){ var args = Array.prototype.slice.call(arguments), sourceStr = args.shift(); function execReplace(text,replacement,index){ return text.replace(new RegExp("\\{"+index+"\\}",'g'),replacement); } return args.reduce(execReplace,sourceStr); } })(window.utils = window.utils || {}); console.log(utils.format("Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love"));

关键的是这句:

args.reduce(execReplace,sourceStr);

这里使用了Array的reduce函数,reduce和reduceRight是ES5新增加的函数,该函数的参数是reduce(callback,initialValue),callback接收4个参数分别是:

previousValue:

在遍历第一次进入该回调函数时,如果指定了initivalValue将直接使用initivalValue,如果没有指定将使用数组的第一个元素 第二次及以后的遍历该值是前一次遍历返回的结果 最后一次遍历返回的结果将作为reduce函数的返回值 currentValue: 遍历到的当前item index: 当前item在数组中的下标

array: 原始array

在execReplace中每一次执行时使用前一次替换后的结果作为原始替换字符串,使用当前item的index作为要被替换的内容,依次遍历,最终完成替换内容。

注:reduceRight和reduce函数基本一样,只是它的遍历顺序是由右向左

您可能感兴趣的文章:js中的string.format函数代码javascript FormatNumber函数实现方法javascript下string.format函数补充javascript下利用arguments实现string.format函数javascript模拟实现C# String.format函数功能代码javascript实现时间格式输出FormatDate函数JavaScript下的时间格式处理函数Date.prototype.formatjs 格式化时间日期函数小结js时间戳格式化成日期格式的多种方法Javascript日期格式化format函数的使用方法


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3